<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/media-100.css"/>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/three.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background: #13152a;
				font-size: 14px;
			}
			.con3{
				margin-top: 0.6rem;
				background: #1a1e37;
			}
			.con3 ul{
				padding: 0.25rem 0;
				display: -webkit-flex; /* Safari */
			  	display: flex;
			  	flex-direction:row;
			  	flex-wrap:wrap;
			  	justify-content:space-between;
			  	border-bottom: 2px solid #484c62;
			}
			.con3 ul ul{
				width: 100%;
				padding: 0.25rem 0 0;
				display: -webkit-flex; /* Safari */
			  	display: flex;
			  	flex-direction:row;
			  	flex-wrap:wrap;
			  	justify-content:space-between;
			  	border-bottom: none;
			}
			.con3 ul ul.third li{
				width: 33.3%;
			}
			.con3 li{
				float: left;
				color: #fff;
				text-align: center;
				width: 23%;
			}
			.con3 li.last{
				width: 8%;
			}
			.con3 li span{
				font-size: 0.24rem;
			}
			.con3 li p{
				font-size: 0.28rem;
				margin-top: 0.15rem;
			}
			.con3 li img{
				width: 0.24rem;
			}
			.hidden{
				display: none;
			}
			.title{
				text-align: center;
				font-size: 0.36rem;
				color: #566bfe;
				margin-top: 0.25rem;
			}
		</style>
	</head>

	<body>
		<h1 class="title">直客综合授信额度(单位：万元）</h1>
		<div class="con3 dataBody">
		</div>
		<script type="text/template" class="dataTpl dataTpl1">
			{@each datas as it, index}
			<ul>
				<li>
					<span>客户</span>
					<p>${it.enterpriseName}</p>
				</li>
				<li>
					<span>授信额度</span>
					<p>>${formatCurrency((it.creditLine/10000).toFixed(2))}</p>
				</li>
				<li>
					<span>可用额度</span>
					<p>${formatCurrency(((it.creditLine*1 - it.creditLineAlready*1)/10000).toFixed(2))}</p>
				</li>
				<li>
					<span>融资金额</span>
					<p>${formatCurrency((it.financeAmount/10000).toFixed(2))}</p>
				</li>
				<li class="last">
					<img src="img/up.png" />
				</li>
				<div class="hidden">
					<ul>
						<li>
							<span>贷款累计发放</span>
							<p>>${formatCurrency((it.totalLoanAmount/10000).toFixed(2))}</p>
						</li>
						<li>
							<span>累计还款</span>
							<p>2${formatCurrency((it.totalRepayAmount/10000).toFixed(2))}</p>
						</li>
						<li>
							<span>敞口金额</span>
							<p>${formatCurrency((it.totalExchangeAmount/10000).toFixed(2))}</p>
						</li>
						<li>
							<span>额度有效期</span>
							<p>${it.effectiveDays}</p>
						</li>
						<li class="last">
						</li>
					</ul>
					<ul class="third">
						<li>
							<span>额度起始时间</span>
							<p>${(it.effectiveStart).substr(0, 10)}</p>
						</li>
						<li>
							<span>额度截止时间</span>
							<p>${(it.effectiveEnd).substr(0, 10)}</p>
						</li>
						<li>
							<span>核准利率及质押率</span>
							<p>{@each it.financeBulkstockPledgeRateList as item} ${item.bulkstockName} 【${item.loanRateCeiling}%/${item.pledgeRateCeiling}%】 <br/>{@/each}</p>
						</li>
					</ul>
				</div>
			</ul>
			</ul>
			{@/each}
		</script>
	</body>
	<script type="text/javascript">
//		var chart = echarts.init(document.getElementById("chart"));
//		option = {
//			title: {
//				text: '客户货品排行',
//				subtext:'仁建国际贸易（上海）有限公司',
//				x: 'center',
//				left: 'center',
//				textStyle: {
//					color: "#566bfe",
//					fontWeight: 'normal',
//				},
//				subtextStyle:{
//					color: "#566bfe",
//					fontSize:'14',
//				}
//			},
//			color: ['#e43b3b'],
//			tooltip: {
//				trigger: 'axis',
//				axisPointer: { // 坐标轴指示器，坐标轴触发有效
//					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
//				}
//			},
//			grid: {
//				left: '3%',
//				right: '4%',
//				bottom: '10%',
//				containLabel: true
//			},
//			xAxis: [{
//				type: 'category',
//				data: ['玉米', '小麦', '面粉', '玉米', '小麦'],
//				axisTick: {
//					alignWithLabel: true
//				}
//			}],
//			yAxis: [{
//				type: 'value'
//			}],
//			textStyle: {
//				color: "#fff"
//			},
//			series: [{
//				name: '直接访问',
//				type: 'bar',
//				barWidth: '30%',
//				data: [10, 52, 200, 334, 390]
//			}]
//		};
//		chart.setOption(option, true);
	</script>

	<script src="../../../../component/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../../../../js/seajs/sea.js"></script>
	<script type="text/javascript" src="../../../../js/seajs/seajs-text.js"></script>
	<script type="text/javascript" src="../../../../js/seajs/seajs-css.js"></script>
	<script type="text/javascript" src="../../../../js/bord/config.js"></script>
	<script type="text/javascript" src="../../../../js/juicer-min.js"></script>
	<script type="text/javascript">
		seajs.use('./creditLine', function(creditLine) {
			creditLine.init();
		});
	</script>
</html>